<template>
  <BasePage title="免上报登记" description="为特殊情况学生申请免上报">
    <!-- 申请表单 -->
    <BaseForm @submit="submitExemption">
      <div class="form-group">
        <label class="form-label">学生姓名</label>
        <input 
          v-model="formData.studentName" 
          type="text" 
          class="form-input" 
          placeholder="请输入学生姓名"
          required
        >
      </div>
      
      <div class="form-group">
        <label class="form-label">学号</label>
        <input 
          v-model="formData.studentId" 
          type="text" 
          class="form-input" 
          placeholder="请输入学生学号"
          required
        >
      </div>
      
      <div class="form-group">
        <label class="form-label">班级</label>
        <input 
          v-model="formData.className" 
          type="text" 
          class="form-input" 
          placeholder="请输入学生班级"
          required
        >
      </div>
      
      <div class="form-group">
        <label class="form-label">免上报类型</label>
        <select v-model="formData.exemptionType" class="form-input" required>
          <option value="">请选择免上报类型</option>
          <option v-for="type in exemptionTypes" :key="type.value" :value="type.value">
            {{ type.label }}
          </option>
        </select>
      </div>
      
      <div class="form-group">
        <label class="form-label">免上报时间</label>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <input 
              v-model="formData.startDate" 
              type="date" 
              class="form-input" 
              required
            >
          </div>
          <div>
            <input 
              v-model="formData.endDate" 
              type="date" 
              class="form-input" 
              required
            >
          </div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">免上报原因</label>
        <textarea 
          v-model="formData.reason" 
          class="form-input" 
          rows="4" 
          placeholder="请详细说明免上报原因"
          required
        ></textarea>
      </div>
      
      <div class="form-group">
        <label class="form-label">上传证明材料</label>
        <div 
          class="border border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50 transition-colors"
          @click="triggerFileUpload"
        >
          <Upload class="w-6 h-6 text-gray-400 mx-auto mb-2" />
          <p class="text-sm text-gray-500">点击上传文件或拖拽文件到此处</p>
          <p v-if="formData.files.length > 0" class="mt-2 text-sm text-green-600">
            已选择 {{ formData.files.length }} 个文件
          </p>
          <input 
            ref="fileInput" 
            type="file" 
            multiple 
            class="hidden" 
            @change="handleFileChange"
          >
        </div>
      </div>
    </BaseForm>
    
    <!-- 提交成功提示 -->
    <div v-if="showSuccess" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-sm w-full p-5 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle class="w-8 h-8 text-green-500" />
        </div>
        <h3 class="text-lg font-medium text-gray-800 mb-2">申请提交成功</h3>
        <p class="text-gray-600 mb-4">您的免上报申请已提交，请等待审核</p>
        <button 
          @click="closeSuccess" 
          class="w-full py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          确定
        </button>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import BasePage from '../../components/BasePage.vue';
import BaseForm from '../../components/BaseForm.vue';
import { Upload, CheckCircle } from 'lucide-vue-next';

const router = useRouter();
const fileInput = ref(null);

// 免上报类型
const exemptionTypes = [
  { value: 'illness', label: '生病请假' },
  { value: 'leave', label: '事假离校' },
  { value: 'internship', label: '实习离校' },
  { value: 'abroad', label: '出国交流' },
  { value: 'graduation', label: '已毕业离校' },
  { value: 'other', label: '其他原因' }
];

// 表单数据
const formData = ref({
  studentName: '',
  studentId: '',
  className: '',
  exemptionType: '',
  startDate: '',
  endDate: '',
  reason: '',
  files: []
});

// 成功提示
const showSuccess = ref(false);

// 触发文件上传
const triggerFileUpload = () => {
  fileInput.value.click();
};

// 处理文件变化
const handleFileChange = (event) => {
  const files = Array.from(event.target.files);
  formData.value.files = files;
};

// 提交免上报申请
const submitExemption = async () => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // 显示成功提示
  showSuccess.value = true;
  
  // 在实际应用中，这里会发送请求到后端保存申请信息
  console.log('免上报申请提交成功:', formData.value);
};

// 关闭成功提示
const closeSuccess = () => {
  showSuccess.value = false;
  
  // 重置表单
  formData.value = {
    studentName: '',
    studentId: '',
    className: '',
    exemptionType: '',
    startDate: '',
    endDate: '',
    reason: '',
    files: []
  };
};
</script>